<template>
	<view class="pay-body">
		<view class="pay-info">
			<image  src="../../static/image/order/pay.png" class="pay-icon"></image>
			<view class="real_price_name">应付金额（元）</view>
			<view class="real_price">￥<text class="real-price-num">{{price}}</text><text style="color: #999;">元</text></view>
		</view>
		<view class="pay-menu">
			<view class="apy-head">支付方式</view>
			<view class="pay-way">
				<i class="icon">&#xe607;</i>
				<text>微信支付</text>
			</view>
		</view>
		<view class="pay-btn" @tap="oauth()">
			<uni-btn>确认支付</uni-btn>
		</view>
		<!-- 遮罩层 -->
		<view class="pay-model" v-if="is_pay"></view>
		<!-- 遮罩层 -->
		<!-- <view class="goods-model" v-if="loading">
		</view>
		<web-load v-if="loading"></web-load> -->
	</view>
</template>

<script>
	import uniBtn from '../../components/unit/button.vue';
	import webLoad from '../../components/unit/loading.vue';
	export default{
		components:{ uniBtn ,webLoad },
		data(){
			return{
				loading: true,
				order_id : 0,
				price :0,
				is_pay : uni.getStorageSync('pay_model')
			}
		},
		onBackPress() {
			alert(1);
		},
		onUnload(){
		},
		onLoad(e){
			if(e.order_id) {
				this.order_id = e.order_id;
				this.price = e.order_price;
				uni.setStorageSync('order_id',e.order_id);
				uni.setStorageSync('pay_price',e.order_price);
			}else{
				this.order_id = uni.getStorageSync('order_id');
				this.price = uni.getStorageSync('pay_price');
			}
			var is_pay = uni.getStorageSync('is_pay');
			if(is_pay) {
				this.getPay();
			}else{
				var code = this.getUrlParam("code");
				if(code) {
					this.oauthLogin(code);
				}
			}
			this.loading = false;
			
		},
		methods:{
			//授权登录
			oauth(){
				var appId = 'wxed3fff9ad2e366cf';
				var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
				var code = this.getUrlParam("code");
				if(!code) {
					uni.setStorageSync('pay_model',111);
					window.location = url;
				}else{
					this.oauthLogin(code);
				}
			},
			//授权登录
			oauthLogin(code){
				this.ajax('wx/getOpenid',{
					data:{code : code},
					success:(res) =>{
						if(res.code) {
							uni.setStorageSync('is_pay',111);
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/order/pay'
								})
							},1000);
						}else{
							this.toast(res.msg);
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/order/success?pay_state=0'
								})
							},1000)
						}
					}
				});
			},
			//获取CODE
			getUrlParam(name) {
			  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			  var r = window.location.search.substr(1).match(reg);
			  if (r != null) return unescape(r[2]);
			  return null;
			},
			//获取支付参数
			getPay(){
				if(typeof WeixinJSBridge == 'undefined') {
					uni.reLaunch({
						url:"/pages/login/wxerror"
					})
					return false;
				}
				this.ajax('pay/index',{
					data:{order_id : this.order_id},
					success: (res) => {
						if(res.code) {
							this.info = res.msg;
							uni.setStorageSync('order_id','');
							uni.setStorageSync('pay_price','');
							uni.setStorageSync('is_pay','');
							uni.setStorageSync('pay_model','');
							this.onBridgeReady();
						} else {
							this.toast(res.msg);
						}
					}
				});
			},
			//调用支付
			onBridgeReady(){
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": this.info.appId, //公众号名称，由商户传入     
						"timeStamp": this.info.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": this.info.nonceStr, //随机串     
						"package": this.info.package,
						"signType": this.info.signType, //微信签名方式：     
						"paySign": this.info.paySign //微信签名 
					},
					(res) =>{
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							uni.reLaunch({
								url:'/pages/order/success?pay_state=1'
							})
							//var url = window.location.host;
							//location.href = "http://" + url + "/h5/pages/order/index";
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						} else {
							uni.reLaunch({
								url:'/pages/order/success?pay_state=0'
							})
						}
					});
			}
		}
	}
</script>

<style>
	page{background:rgba(249,249,249,1);}
	.pay-info{background: #fff;padding:50upx 0;}
	.pay-info::before{display: table;contet:''}
	.pay-icon{
		display: block;
		width: 150upx;
		margin: auto;
		height: 130upx;
	}
	.goods-model{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height:100%;
		background: #fff;
		z-index:9;
	}
	.real_price_name{text-align: center;color:#999;margin-top: 40upx;}
	.real_price{margin-top:20upx;text-align: center;}
	.real-price-num{font-size: 50upx;color: #000000;font-weight: bold;margin-right: 10upx;}
	.pay-menu{box-sizing: border-box;padding:0 30upx;}
	.apy-head,.pay-way{font-weight: bold;padding: 30upx 0;border-bottom: 1upx solid #E1E1E1;}
	.pay-way{border:none;font-weight: normal;color:#999;font-size: 28upx;overflow: hidden;}
	.pay-way .icon{color: #09BB07;margin-right: 20upx;font-size: 40upx;float: left;}
	.pay-model{position: fixed;width: 100%;height: 100%;top:0;left:0;background: #fff;z-index: 9;}
</style>
